<template>
  <div class="caseshow" align="center">
    <div class="phone_header">
      <phonenav :backcolor="backcolor" :type="type" />
    </div>
    <div class="header">
      <div class="com_nav"><topnav style="padding-top: 30px"></topnav></div>
      <div class="header_top">
        <div class="header_top_left">
          <img :src="logo" alt="" />
        </div>
        <div class="header_top_right">
          <ul class="scroll-menu">
            <li v-for="(vo, key) in nav" :key="key">
              <a :data-text="vo.title" href="">{{ vo.title }}</a>
            </li>
          </ul>
        </div>
        <div class="header_top_right_menu">
          <img :src="menu" @click="drawer = true" />
          <el-drawer
            title="请选择跳转页面"
            :visible.sync="drawer"
            :with-header="false"
          >
            <div class="ct-nav">
              <span v-for="(vo, key) in nav" :key="key"
                ><a href="">{{ vo.title }}</a></span
              >
            </div>
          </el-drawer>
        </div>
      </div>
      <div class="header_con">
        <p style="font-size: 32px">9年工作经验 服务过几百家商家 企业 品牌</p>
        <p style="font-size: 46px; font-weight: bold">我们的案例</p>
      </div>
    </div>
    <div class="body">
      <div class="bread">
        <p>您现在的位置：</p>
        <el-link type="info" :underline="false">首页</el-link>
        <p style="color: #47484b">> 案例中心</p>
      </div>
      <div class="anli" v-for="(vo, key) in cases" :key="key">
        <img :src="vo.image" />
        <div class="con">
          <p class="con-p">{{ vo.title }}</p>
          <img :src="lianjie" />
        </div>
      </div>
    </div>
    <!-- 联系我们footer -->
    <last></last>
    <!--  -->
    <location></location>
  </div>
</template>

<script>
import Last from "../components/Last.vue";
import Location from "../components/Location.vue";
import topnav from "../components/Topnav.vue";
import phonenav from "../components/Phone_nav.vue";
export default {
  data() {
    return {
      backcolor: "anli/banner.jpg",
      type: "image",
      logo: require("../assets/image/logo.png"),
      gz_07: require("../assets/image/gz_07.png"),
      lianjie: require("../assets/image/link_ico.png"),
      menu: require("../assets/image/菜单.png"),
      drawer: false,
      nav: [
        { title: "首页" },
        { title: "关于我们" },
        { title: "商城小程序" },
        { title: "生鲜小程序" },
        { title: "案例展示" },
        { title: "服务项目" },
        { title: "联系我们" },
      ],
      cases: [
        {
          image: require("../assets/image/anli/1.png"),
          title: "懂伤帝社交小程序",
        },
        {
          image: require("../assets/image/anli/2.png"),
          title: "MUMUSO小程序商城",
        },
        {
          image: require("../assets/image/anli/3.png"),
          title: "静安区3.5学雷锋",
        },
        { image: require("../assets/image/anli/4.png"), title: "义公里小程序" },
        {
          image: require("../assets/image/anli/5.png"),
          title: "客领名片小程序",
        },
        { image: require("../assets/image/anli/6.png"), title: "研助宝小程序" },
        { image: require("../assets/image/anli/7.png"), title: "华住会小程序" },
        { image: require("../assets/image/anli/8.png"), title: "鲁泰集团" },
        { image: require("../assets/image/anli/9.png"), title: "上海橱柜定制" },
        {
          image: require("../assets/image/anli/10.png"),
          title: "群里说事小程序",
        },
      ],
    };
  },
  components: {
    last: Last,
    location: Location,
    topnav,
    phonenav,
  },
};
</script>
<style lang="less" scoped>
.scroll-menu {
  display: flex;
  text-align: center;
  height: 25px;
  overflow: hidden;
}
.scroll-menu li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
}
.scroll-menu li {
  height: 20px;
  list-style: none;
}
.scroll-menu li * {
  display: inline-block;
  font-size: 18px;
  line-height: 23px;
}
.scroll-menu li a {
  margin-top: -25px;
  transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
}
.scroll-menu li a:hover {
  margin-top: 0;
}
.scroll-menu li a:before {
  content: attr(data-text);
  display: block;
  color: #f3f3f3;
  font-weight: 600;
}

.body {
  margin: 0 auto;
  width: 100%;
  background-color: #eeeeee;
}
.phone_header {
  display: none;
}
.header {
  background-repeat: repeat-x;
  background-size: auto;
  height: 500px;
  background-position: center center;
  background: url("../assets/image/anli/banner.jpg") no-repeat center center;
}
.ct-nav {
  display: flex;
  flex-direction: column;
}
.ct-nav span {
  height: 45px;
  border-bottom: 1px solid rgb(197, 197, 197);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-nav span a {
  text-decoration: none;
  color: black;
}
.header_top {
  width: 100%;
  height: 140px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}
.header_top_left img {
  width: 380px;
}
.header_top_right {
  display: flex;
}
.header_top_right a {
  width: 110px;
  color: white;
  text-decoration: none;
}
.header_con {
  text-align: center;
}
.header_con p {
  color: white;
}
.header_about {
  height: 100px;
  line-height: 100px;
}
.body {
  width: 47%;
}
.bread {
  height: 80px;
  display: flex;
  align-items: center;
  font-size: 14px;
  p {
    color: #909399;
  }
}
.header_top_right_menu img {
  width: 40px;
  height: 40px;
}
.anli {
  background-color: white;
  width: 100%;
  margin-bottom: 40px;
  img {
    width: 100%;
    transition: all 0.5s;
  }
  .con {
    height: 50px;
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 34px;
      height: 34px;
    }
  }
}
.header_top_right_menu {
  display: none;
}
.anli:hover img {
  transform: scale(0.97);
}
@media (min-width: 1220px) {
  .header_top {
    display: none;
  }
}
@media (max-width: 1220px) {
  .phone_header {
    display: block;
  }
  .header {
    display: none;
  }
  .com_nav {
    display: none;
  }
  .header_top {
    width: 100%;
    height: 140px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
  }
  .header_top_right_menu {
    display: block;
  }
  .header_top_right {
    display: none;
  }
}
@media (max-width: 812px) {
  .bread {
    font-size: 9px;
  }
  .con {
    width: 100%+60px;
  }
  .header {
    background-repeat: repeat-x;
    background-size: auto;
    height: 500px;
    background-position: center center;
    background: url("../assets/image/anli/banner.jpg") no-repeat center center;
  }
  .header_top_left img {
    width: 300px;
  }
}
@media (max-width: 400px) {
  .bread {
    font-size: xx-small;
    width: 100%+15px;
  }
  .con-p {
    font-size: 10px;
  }
  .header {
    background-repeat: repeat-x;
    background-size: auto;
    height: 500px;
    background-position: center center;
    background: url("../assets/image/anli/banner.jpg") no-repeat center center;
  }
  .header_top_left img {
    width: 250px;
  }
}
</style>
